<template>
  <view>
    <u-popup
      :show="visible"
      mode="bottom"
      :close-on-click-overlay="false"
      :closeable="true"
      :round="20"
      @close="visible = false"
      @touchmove.stop.prevent="stopRoll"
    >
      <view class="adopt-header">
        <view class="title">
          <text class="title-name">@{{ list.nickName }}</text>
          <text class="title-text">收到的捐助</text>
        </view>
        <view class="order-count">
          <text>累计收到价值</text>
          <text class="count">{{ loveObj.totalPetRation }}g</text>
          <text>的口粮</text>
          <text v-if="loveObj.totalMeal > 1">
            <text>,可供它饱餐</text>
            <text class="count">{{ loveObj.totalMeal }}</text>
            顿
          </text>
        </view>
      </view>
      <scroll-view
        scroll-y="true"
        style="height: 500px"
        @scrolltolower="handleScrolltolower"
      >
        <view class="adopt-all">
          <view class="view-box">
            <view class="order-detail">
              <!-- <view class="order-count">
              <text>累计收到价值</text>
              <text class="count">{{ loveObj.totalPetRation }}g</text>
              <text>的口粮</text>
              <text v-if="loveObj.totalMeal > 1">
                <text>,可供它饱餐</text>
                <text class="count">{{ loveObj.totalMeal }}</text>
                顿
              </text>
            </view> -->
              <view class="order-person">
                <view>
                  <view
                    v-for="(item, index) in loveList"
                    :key="index"
                    class="person-all flex justify-sb"
                  >
                    <view class="flex align-center">
                      <view>
                        <u-avatar
                          class="img"
                          :src="item.avatar"
                          size="34"
                          alt=""
                        ></u-avatar>
                      </view>
                      <view class="information">
                        <view class="person-name">{{ item.nickname }}</view>
                        <view class="minute">{{ item.donateTimeStr }}</view>
                      </view>
                    </view>
                    <view
                      class="donation-infor"
                      v-html="
                        formatDonateContent(
                          item.donateContent,
                          item.skuList.map((v) => v.feedingInfo),
                          item.skuList.map((v) => v.goodsName)
                        )
                      "
                    ></view>
                  </view>
                </view>
              </view>
            </view>
            <maya-load-more v-if="finished" />
          </view>
        </view>
      </scroll-view>
      <view class="button-all">
        <u-button
          type="primary"
          shape="circle"
          class="button-footer"
          @click="onClose"
        >
          我知道了
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { selectLoveList } from '@/api/detail.js';
import mayaLoadMore from '@/components/maya-load-more.vue';
export default {
  components: {
    mayaLoadMore,
  },
  props: {
    value: {
      type: Boolean,
      value: false,
    },
    list: {
      type: Object,
    },
  },
  data() {
    return {
      finished: false,
      page: {
        current: 1,
        size: 10,
      },
      loading: false,
      loveObj: '',
      loveList: [],
      status: 'loadmore',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.page.current = 1;
        console.log('进来了没有');
        this.selectLoveList();
      }
    },
  },
  onReachBottom() {
    //上拉触底函数
    if (!this.finished) {
      this.page.current += 1;
      this.selectLoveList();
    }
  },
  methods: {
    stopRoll() {
      return false;
    },
    handleScrolltolower() {
      if (!this.finished) {
        this.page.current += 1;
        uni.showLoading({
          title: '加载中...',
          mask: true,
        });
        this.selectLoveList();
      }
    },
    formatDonateContent(donateContent, feedinfo, goodsName) {
      let flag = '';
      if (feedinfo[0]) {
        flag = JSON.parse(feedinfo[0]);
      }
      if (feedinfo[0] !== '') {
        return donateContent.replace(
          '${feedGoodsInfo}',
          `<span style="color:#2B9B00;">${
            flag.totalFeedQty > 0 ? flag.totalFeedQty : ''
          }${flag.totalFeedQty > 0 ? flag.goodsUnit : ''}${goodsName}</span>`
        );
      } else {
        if (donateContent.includes('goodsName')) {
          return donateContent.replace(
            '${goodsName}',
            `<span style="color:#2B9B00;">${goodsName}</span>`
          );
        } else {
          return donateContent.replace(
            '${feedGoodsInfo}',
            `<span style="color:#2B9B00;">${goodsName}</span>`
          );
        }
      }
    },
    onClose() {
      this.visible = false;
    },
    async selectLoveList() {
      try {
        this.loading = true;
        const params = {
          ...this.page,
          petId: this.list.id,
        };
        const { data } = await selectLoveList(params);
        this.loveObj = data;
        if (params.current === 1) {
          this.loveList = this.loveObj.petDonateShelfRecordDetail || [];
        } else {
          this.loveList = this.loveList.concat(
            this.loveObj.petDonateShelfRecordDetail
          );
        }
        // 标识是否全部加载完成
        this.finished =
          this.loveObj.petDonateShelfRecordDetail.length < this.page.size;
        uni.hideLoading();
        // this.loveList = this.loveObj.petDonateShelfRecordDetail || [];
      } catch (e) {
        uni.hideLoading();
        throw new Error(e);
      }
    },
  },
};
</script>

<style lang="scss">
.button-all {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-footer {
  background: $btn-primary-color;
  border-radius: 19px;
  position: fixed;
  bottom: 33px;
  width: 90%;
  text-align: center;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  margin: 0 auto;
}
.adopt-header {
  .title {
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    .title-name {
      font-weight: 500;
      font-size: 16px;
      color: #35bf00;
    }
    .title-text {
      font-weight: 600;
      font-size: 16px;
      color: #2b2b2b;
      margin-left: 12rpx;
    }
  }
  .order-count {
    font-weight: 600;
    // color: $main-color;
    font-size: 14px;
    text-align: center;
    padding: 5px 0px;
    box-sizing: border-box;
    font-size: 12px;
    color: #2b9b00;
    background: #dbf9cf;
    border-radius: 8px;
    .count {
      font-weight: 700;
      font-size: 20px;
      color: #333333;
    }
  }
}
.adopt-all {
  .view-box {
  }
  .order-detail {
    padding: 0px 12px;
    box-sizing: border-box;
    .order-person {
      margin-top: 13px;
      // height: 500px;
      // overflow-y: scroll;
      .person-all {
        padding-bottom: 12px;
        .donation-infor {
          color: #666666;
          font-size: 12px;
          word-break: break-all;
          max-width: 50%;
        }
        .information {
          margin-left: 10px;
          .person-name {
            font-weight: 500;
            font-size: 12px;
            color: #333333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 110px;
            word-break: break-all;
            overflow-wrap: break-word;
          }
          .minute {
            font-weight: 400;
            font-size: 12px;
            color: #afafaf;
          }
        }
      }
    }

    .more {
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin-top: 10px;
    }
  }
}
</style>
